<form class="form-horizontal" name="endpointGroupForm">
  <!-- name-input -->
  <div class="form-group" ng-class="{ 'has-error': endpointGroupForm.group_name.$invalid }">
    <label for="group_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" name="group_name" ng-model="$ctrl.model.Name" placeholder="e.g. my-group" required auto-focus>
    </div>
  </div>
  <div class="form-group" ng-show="endpointGroupForm.group_name.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="endpointGroupForm.group_name.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !name-input -->
  <!-- description-input -->
  <div class="form-group">
    <label for="group_description" class="col-sm-3 col-lg-2 control-label text-left">Description</label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" id="group_description" ng-model="$ctrl.model.Description" placeholder="e.g. production environments...">
    </div>
  </div>
  <!-- !description-input -->
  <div class="col-sm-12 form-section-title">
    Metadata
  </div>
  <!-- tags -->
  <div class="form-group">
    <tag-selector
      tags="$ctrl.availableTags"
      model="$ctrl.model.Tags"
    ></tag-selector>
  </div>
  <!-- !tags -->
  <!-- endpoints -->
  <div ng-if="$ctrl.model.Id !== 1">
    <div class="col-sm-12 form-section-title">
      Associated endpoints
    </div>
    <div class="form-group">
      <div class="col-sm-12 small text-muted">
        You can select which endpoint should be part of this group by moving them to the associated endpoints table. Simply click
        on any endpoint entry to move it from one table to the other.
      </div>
      <div class="col-sm-12" style="margin-top: 20px;">
        <!-- available-endpoints -->
        <div class="col-sm-6">
          <div class="text-center small text-muted">Available endpoints</div>
          <div style="margin-top: 10px;">
            <group-association-table
              loaded="$ctrl.loaded"
              page-type="$ctrl.pageType"
              table-type="available"
              retrieve-page="$ctrl.getPaginatedEndpointsByGroup"
              dataset="$ctrl.availableEndpoints"
              entry-click="$ctrl.associateEndpoint"
              pagination-state="$ctrl.state.available"
              empty-dataset-message="No endpoint available"
            ></group-association-table>
          </div>
        </div>
        <!-- !available-endpoints -->
        <!-- associated-endpoints -->
        <div class="col-sm-6">
          <div class="text-center small text-muted">Associated endpoints</div>
          <div style="margin-top: 10px;">
            <group-association-table
              loaded="$ctrl.loaded"
              page-type="$ctrl.pageType"
              table-type="associated"
              retrieve-page="$ctrl.getPaginatedEndpointsByGroup"
              dataset="$ctrl.associatedEndpoints"
              entry-click="$ctrl.dissociateEndpoint"
              pagination-state="$ctrl.state.associated"
              empty-dataset-message="No associated endpoint"
            ></group-association-table>
          </div>
        </div>
        <!-- !associated-endpoints -->
      </div>
    </div>
  </div>
  <div ng-if="$ctrl.model.Id === 1">
    <div class="col-sm-12 form-section-title">
      Unassociated endpoints
    </div>
    <div style="margin-top: 10px;">
      <group-association-table
        loaded="$ctrl.loaded"
        page-type="$ctrl.pageType"
        table-type="associated"
        retrieve-page="$ctrl.getPaginatedEndpointsByGroup"
        dataset="$ctrl.associatedEndpoints"
        pagination-state="$ctrl.state.associated"
        empty-dataset-message="No endpoint available"
      ></group-association-table>
    </div>
  </div>
  <!-- !endpoints -->
  <!-- actions -->
  <div class="col-sm-12 form-section-title">
    Actions
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button type="button" class="btn btn-primary btn-sm" ng-click="$ctrl.formAction()" ng-disabled="$ctrl.actionInProgress || !endpointGroupForm.$valid" button-spinner="$ctrl.actionInProgress">
        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
        <span ng-show="$ctrl.actionInProgress">In progress...</span>
      </button>
    </div>
  </div>
  <!-- !actions -->
</form>
